<script>

import AsideCom from "@/components/AsideCom.vue"
export default{
  data(){
    return{
      select1: '',
      userName:'',
      LoginStatus:false  
    }
  },
  components:{
    AsideCom,
   },
   mounted() {
    this.loginState();
  },
   // 
   methods:{
    // 点击去登录按钮
    logout1(){
      this.$router.push('/login')
    console.log("点击去登录按钮")

      
    },
    // 点击退出登录按钮
    loginout(){
      // 清除登录的数据
      localStorage.removeItem("userName");
      localStorage.removeItem("token");
      location.reload() //刷新页面 true时刷新默认   false不刷新 
      this.loginState();
    },
    // 点击跳转到设置页面
    setup(){
      console.log("点击跳转到设置页面")
    },

    loginState(){
      if (localStorage.getItem("userName")) {
        this.LoginStatus = true;
        this.userName = localStorage.getItem("userName");
      } else {
        this.LoginStatus = false;
      }
    }

   }
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- 左边 -->
      <el-aside width="250px">
        <div class="logo-box">
          <AsideCom />
        </div>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
          <div class="login">
            <span>{{ userName }}</span>

            <el-select v-model="select1"  :placeholder=userName style="width: 115px" suffix-icon="CaretBottom" class="el-select1" v-if="LoginStatus">
            <el-option  value="去登录"  @click="logout1"  />
            <el-option  value="安全退出" @click="loginout"  />
            <el-option  value="设置"  @click="setup" />
            </el-select>

            <el-select v-model="select1" placeholder="用户名" style="width: 115px" suffix-icon="CaretBottom" class="el-select1" v-else>
                <el-option  value="去登录"  @click="logout1"  />
                <el-option  value="安全退出" @click="loginout"  />
                <el-option  value="设置"  @click="setup" />
            </el-select>
          </div>
          
        </el-header>
        <!--主体  -->
        <el-main>
          
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.el-container {
  background-color: aqua;
}

.el-aside {
  background-color: rgba(76, 164, 254);
}

.el-header {
  background-color: rgba(76, 164, 254);
  position: relative;
}
.login  {
  position: absolute;
  top: 14px;
  right: 10px;
}

.el-main {
  background-color: rgba(246, 246, 246);
  overflow: hidden;
}



.el-select-dropdown__item:hover{
  background-color: rgba(76, 164, 254);
  color: white;
}



</style>
